<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p>::shadow 貌似没有效果，无法渗透</p>
		
		<style>
			.sign-up::shadow>div>.username,
			.sign-up::shadow>div>.password {
				font-size: 18px;
				border: 1px solid red;
			}
			
			.sign-up::shadow .btn {
				font-size: 18px;
				width: 40px;
				height: 20px;
			}
		</style>
		<div class="sign-up"></div>

		<template class="sign-up-template">
			<style>
				.username,.password {
					font-size: 12px;
					width: 200px;
				}
			</style>
			<div>
				<input type="text" id="username" class="username" placeholder="用户名">
			</div>
			<div>
				<input type="password" id="password" class="password" placeholder="密码">
			</div>
			<button id="btn" class="btn">注册</button>
		</template>

		<script>
			var host = document.querySelector('.sign-up');
			var root = host.createShadowRoot();
			var template = document.querySelector('.sign-up-template');
			root.appendChild(document.importNode(template.content, true));
		</script>
	</body>

</html>